Ejemplo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Herencia</title>
<style type="text/css">
(1)#caja header h1 { color: blue; }
(2)#caja .cabecera h1 { color: red; }
(3)header h1 { color: lime; }
(4)h1 { color:purple; }
</style>
</head><
<body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
</header>
</div>
</body>
</html>
PUNTUACION DE CSS
- A = ESTILOS DE LINEA
- B = NÚMERO DE IDs
- C = NÚMERO DE CLASES
- D = NÚMERO DE MARCAS HTML
- #caja header h1 { color: blue; }
A=0
B=1
C=0
D=2
Total = 0,1,0,2
- #caja .cabecera h1 { color: red; }
A=0
B=1
C=1
D=1
Total = 0,1,1,1
- header h1 { color: lime; }
A=0
B=0
C=1
D=0
Total = 0,0,0,2
- h1 { color:purple; }
A=0
B=0
C=0
D=1
Puntuación = 0,0,0,1
el estilo ganado es el que posee mas en el total en este caso es el numero 2.
el resultaod es:
Cabecera: header